<template>
  <div>
    <div style="height: 100%;background:#f5f5f5;" v-if="ordinaryLogin">
      <header style="display: flex;align-items: center;" @click="changeMessage()">
        <img slot="icon" :src="userHead"  style="width: 1.4rem;height: 1.4rem;border-radius: 50%;margin-left: 0.2rem">
        <div  class="page_info">
          <span v-text="userName"></span>
          <span style="font-size:0.24rem;color: #e5e5e5;" >手机：{{userPhone}}</span>
        </div>
        <img src="../../assets/mine/arrow.png" style="opacity: 0.95;width: .5rem;position: absolute;right: .1rem;height: .45rem;top:0.95rem">
      </header>
     <div style="background: #fff;box-shadow: 0px 5px 10px rgba(194,194,194,.2);">
        <yd-cell-item arrow type="link" href="/balance">
          <img slot="icon" src="../../assets/mine/balance.png" style="width: .36rem;height: .38rem;">
          <span slot="left" style="margin-left: .04rem;">账户余额 <span class="discount">优惠充值 最高5折</span></span>
          <span slot="right" style="color: #808080">{{balanceCount}}元</span>
        </yd-cell-item>
     </div>

      <div style="margin-top: 30px;background: #fff;box-shadow: 0px -5px 10px rgba(194,194,194,.2);">
        <yd-cell-item arrow type="link" href="/message">
          <img slot="icon" src="../../assets/mine/msg.png" style="width: .36rem;height: .29rem;position: relative;top: .04rem;">
          <span slot="left" style="margin-left: .04rem">消息列表</span>
          <yd-badge type="danger" slot="right" v-if="numCount > 0">{{numCount}}</yd-badge>
        </yd-cell-item>
        <yd-cell-item arrow type="link" href="/follow_list">
          <img slot="icon" src="../../assets/mine/follow.png" style="width: .38rem;height: .38rem;position: relative;top: .02rem;">
          <span slot="left" style="margin-left: .02rem;">关注列表</span>
        </yd-cell-item>
        <yd-cell-item arrow type="link" href="/change_mobile">
          <img slot="icon" src="../../assets/mine/cg_mobile.png" style="width: .25rem;height: .38rem;position: relative;top: .04rem;">
          <span slot="left" style="margin-left: .15rem;">更换手机</span>
        </yd-cell-item>
        <yd-cell-item arrow type="link" href="/modify_psd">
          <img slot="icon" src="../../assets/mine/modify_psd.png" style="width: .29rem;height: .38rem;position: relative;top: .04rem;">
          <span slot="left" style="margin-left: .11rem;">修改密码</span>
        </yd-cell-item>
        <yd-cell-item arrow @click.native="onlinekefu()">
          <img slot="icon" src="../../assets/mine/kefu.png" style="width: .36rem;height: .34rem;position: relative;top: .04rem;">
          <span slot="left" style="margin-left: .04rem;">在线客服</span>
        </yd-cell-item>
      </div>

      <yd-button size="large" bgcolor="#fff" color="rgba(128,128,128,.6)" class="back_login" @click.native="backLogin">退出登录</yd-button>

    </div>
      <div style="width: 100%;height: 100%;position:fixed;top: 0;left:0;background: #fff;" v-if="loginShow">
        <div style="margin-top: 2rem;display: flex;flex-flow: column;align-items: center;">
          <img src="../../assets/mine/no_login.png" style="width: 4.6rem;height: 4.6rem;">
          <yd-button type="danger" class="login_btn" @click.native="nowLogin()">登录</yd-button>

        </div>
      </div>

  </div>
</template>

<script>
  export default {
    name:'minePage',
    data() {
      return {
        userHead:require('../../assets/mine/no_head.png'),
        userName:'',
        userPhone:'',
        balanceCount:'',
        loginShow:false,
        ordinaryLogin:false,
        numCount:'',
      }
    },
    methods: {
      onlinekefu(){
        _MEIQIA('showPanel');
      },
      changeMessage(){
        this.$router.push('/change_message');
      },
      nowLogin(){
        this.$router.push('/login');
      },
      backLogin(){
        let that = this;
        this.$dialog.confirm({
          title: '退出登录',
          mes: '',
          opts: () => {
            this.$ajax.post(window.g.apiUrl+'/user/logout.do')
              .then((response)=>{
                if(response.data.code == 200){
                  that.$router.push('/login')
                }else{
                  that.$dialog.notify({
                    mes: '退出登录失败，请稍后重试',
                    timeout: 1500,
                  });
                }
              }).catch(()=>{
            })
          }
        });
      }
    },
    created(){
      let that = this;
      let userid = localStorage.getItem('userid');

        that.$ajax.post(window.g.apiUrl+'/user/isLog.do').then((response)=>{
        if(response.data.code !=200){
          that.loginShow = true;
          that.ordinaryLogin = false;
        }else{
          that.ordinaryLogin = true;
          that.$ajax.post(window.g.apiUrl+'/user/getUser.do',JSON.stringify({
            id:userid,
          })).then((response)=>{
            if(response.data.code == 200){
              if(response.data.data.head != undefined){
                that.userHead = response.data.data.head+'?t='+Date.now();
              }else{
                that.userHead = require('../../assets/mine/no_head.png')
              }
              if(response.data.data.nickname != undefined){
                that.userName = response.data.data.nickname;
              }else{
                that.userName = '';
              }
              that.userPhone = response.data.data.phone;
            }else{
              that.$dialog.notify({
                mes: '信息获取超时，请稍后重试',
                timeout: 1500,
              });
            }
          }).catch(()=>{
          })
          that.$ajax.post(window.g.apiUrl+'/account/getBalance.do')
            .then((response)=>{
              if(response.data.code == 200){
                that.balanceCount = response.data.data;
              }
            }).catch(()=>{
          })
            this.$ajax.post(window.g.apiUrl+'/account/getNewsUnreadCount.do')
              .then((response)=>{
                if(response.data.code == 200){
                  that.numCount = response.data.result.total;
                }
              }).catch(()=>{
            })
        }
      }).catch(()=>{
      })

    },
    mounted(){


      (function(m, ei, q, i, a, j, s) {
        m[i] = m[i] || function() {
          (m[i].a = m[i].a || []).push(arguments)
        };
        j = ei.createElement(q),
          s = ei.getElementsByTagName(q)[0];
        j.async = true;
        j.charset = 'UTF-8';
        j.src = 'https://static.meiqia.com/dist/meiqia.js?_=t';
        s.parentNode.insertBefore(j, s);
      })(window, document, 'script', '_MEIQIA');
      _MEIQIA('entId', 90685);
      _MEIQIA('withoutBtn');

    },
    activated(){
      console.log('缓存开始')
    },
    deactivated(){
      console.log('缓存结束')
    },
  }
</script>

<style scoped>
header{
  width: 100%;
  height: 2.5rem;
  background-image: url("../../assets/mine/bg.png");
  background-size: 100% 100%;
}
  .back_login{
    margin-top: 35px;
    box-shadow: 0px -5px 10px rgba(194,194,194,.2),0px 5px 10px rgba(194,194,194,.2);
    font-size: .28rem
  }
  .page_info{
    color: #fff;
    display: flex;
    flex-flow: column;
    align-items: left;
    padding-left: 0.3rem;
    line-height: 0.48rem;
    text-align: left;
  }
  .discount{
    font-size: 0.24rem;
    display: inline-block;
    width: 2rem;
    height:.4rem;
    background: #f86364;
    color:#fff;
    text-align: center;
    line-height: .4rem;
    border-radius: 3px;
    position: relative;
    top: -1px;
  }
  .login_btn{
    color: #fff;
    width: 3.16rem;
    height: .9rem;
  }
</style>
